export default formData => {
  // src/views 目录下的所有 vue 组件
  const viewsPath = import.meta.glob("/src/views/**/*.vue");

  // 获取组件数据
  const handleGetComponents = category => {
    // 目录类型只显示 Layout 布局组件
    if (category === 1) return [{ label: "布局组件", value: "Layout" }];
    // 菜单
    if (category === 2) {
      const components = [];
      Object.keys(viewsPath).forEach(key => {
        // 将 /src/views/ 正则替换成空，将 .vue 正则替换成空
        const name = key.replace(/\/src\/views\/|\.vue/g, "");
        // 去除 error 页面
        if (/error\/.*/.test(name)) return;
        // 去除 login 页面
        if (name === "login") return;
        // 正则校验，name 路径 不包含 components 下的文件
        if (!name.includes("components")) {
          components.push({ label: name, value: name });
        }
      });
      return components;
    }
    return [];
  };

  // 菜单目录切换
  const handleMenuTypeChange = ({ value }) => {
    let formKey = [];
    switch (value) {
      case 1:
        formKey = [
          "parentId",
          "name",
          "category",
          "icon",
          "activeIcon",
          "path",
          "redirect",
          "sorted",
          "visible",
          "status",
        ];
        break;
      case 2:
        formData.value.menuType = "F";
        formKey = [
          "parentId",
          "name",
          "category",
          "icon",
          "activeIcon",
          "path",
          "component",
          "componentName",
          "sorted",
          "visible",
          "status",
          "keepAlive",
          "alwaysShow",
        ];
        break;
      case 3:
        formKey = ["parentId", "name", "category", "authKey", "sorted", "status", "appCode", "authKey"];
        break;
    }
    // 动态显示隐藏表单项，并清空隐藏项的值
    let column = tableOption.value.group[0].column;
    for (let key in column) {
      if (formKey.includes(key)) column[key].display = true;
      else {
        column[key].display = false;
        column[key].type === "radio" ? (formData.value[key] = 0) : (formData.value[key] = "");
      }
    }
    // 判断菜单图标是否是必填
    handleIsShowIcon(formData.value.parentId, value);
    // 根据菜单类型获取组件数据
    column.component.dicData = handleGetComponents(value);
  };

  // 是否显示图标
  const handleIsShowIcon = (parentId, category) => {
    const column = tableOption.value.group[0].column;
    if (parentId === 0 && [1, 2].includes(category)) {
      column.icon.display = true;
      column.activeIcon.display = true;
    } else {
      column.icon.display = false;
      column.activeIcon.display = false;
    }
  };

  // 更新菜单类型，当父级菜单类型为 菜单 时，只能添加 按钮 类型，禁用其他类型
  const handleUpdateMenuType = parentId => {
    const column = tableOption.value.group[0].column;
    // 根据 parentId 从树形菜单中获取菜单类型
    const findMenu = menuList => {
      for (let item of menuList) {
        if (item.value === parentId) {
          return item;
        }
        if (item.children) {
          const found = findMenu(item.children);
          if (found) return found;
        }
      }
    };

    // 获取父级菜单
    const parentMenu = findMenu(column.parentId.dicData);

    // 如果父级是菜单类型，只能添加按钮类型
    if (parentMenu && parentMenu.category === 2) {
      // 禁用除了按钮类型外的其他类型
      column.category.dicData = column.category.dicData.map(item => {
        return {
          ...item,
          disabled: item.value !== 3,
        };
      });
      formData.value.category = 3;
    } else {
      // 否则启用所有类型
      column.category.dicData = column.category.dicData.map(item => {
        return {
          ...item,
          disabled: false,
        };
      });
    }
  };

  // 搜索配置
  const searchOption = ref({
    formConfig: {
      // 菜单名称
      name: {
        label: "菜单名称",
      },
      // 菜单状态
      status: {
        label: "菜单状态",
        component: "el-select",
        dicData: [
          { label: "启用", value: 1 },
          { label: "禁用", value: 0 },
        ],
      },
    },
  });

  // 表格配置
  const tableOption = ref(
    Utils.tools.deleteSearchConfig({
      // 弹窗宽度
      dialogWidth: "50%",
      // 是否显示编辑按钮
      editBtn: false,
      // 是否显示删除按钮
      delBtn: false,
      // 菜单宽度 单个按钮 52px 按钮容器内边距 8px 例如：4个按钮 = 52 * 4 * 8
      menuWidth: 52 * 3 + 8,
      // 对齐方式
      align: "left",
      // 行主键 key
      rowKey: "id",
      // 父主键 key
      rowParentKey: "parentId",
      // label宽度
      labelWidth: 98,
      // 表单间距
      gutter: 24,
      // 表格配置
      column: {
        // 分类名称
        name: {
          label: "分类名称",
          width: 280,
          display: false,
        },
        // 分类图片
        img: {
          label: "分类图片",
          width: 280,
          display: false,
        },
        // 排序
        sorted: {
          label: "排序",
          width: 120,
          align: "center",
          display: false,
        },
        // 权限标识
        authKey: {
          label: "权限标识",
          minWidth: 200,
          display: false,
        },
        // 组件路径
        component: {
          label: "组件路径",
          minWidth: 200,
          display: false,
          showOverflowTooltip: true,
        },
        // 组件名称
        componentName: {
          label: "组件名称",
          minWidth: 150,
          display: false,
        },
        // 状态
        status: {
          label: "状态",
          width: 120,
          align: "center",
          display: false,
          dicData: [
            { label: "启用", value: 1 },
            { label: "禁用", value: 0 },
          ],
        },
      },
      // 表单配置
      group: [
        {
          column: {
            parentId: {
              label: "上级菜单",
              type: "tree",
              value: 0,
              span: 24,
              change: ({ value }) => {
                // 判断菜单图标是否是必填
                handleIsShowIcon(value, formData.value.category);
                // 更新菜单类型
                handleUpdateMenuType(value);
              },
              rules: [{ required: true, message: "请选择上级菜单", trigger: "blur" }],
            },
            category: {
              label: "菜单类型",
              type: "radio",
              value: 1,
              span: 24,
              button: true,
              dicData: [
                { label: "目录", value: 1 },
                { label: "菜单", value: 2 },
                { label: "按钮", value: 3 },
              ],
              change: handleMenuTypeChange,
              rules: [{ required: true }],
            },
            name: {
              label: "菜单名称",
              type: "input",
              span: 24,
              rules: [
                { required: true, message: "请输入菜单名称", trigger: "blur" },
                { min: 2, max: 6, message: "菜单名称长度只能在2-6个字符之间", trigger: "blur" },
              ],
            },
            path: {
              label: "路由地址",
              type: "input",
              span: 24,
              labelTip: "访问的路由地址，如：`user`，不需要加`/`",
              rules: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
            },
            component: {
              label: "组件路径",
              type: "select",
              span: 24,
              display: false,
              filterable: true,
              labelTip: "访问的组件路径，如：`system/user/index`，默认在`views`目录下",
              rules: [
                {
                  required: true,
                  validator: (rule, value, callback) => {
                    if (formData.value.parentId && !value) {
                      callback(new Error("请选择路由组件"));
                    } else {
                      callback();
                    }
                  },
                  trigger: "change  ",
                },
              ],
            },
            icon: {
              label: "菜单图标",
              component: "IconSelector",
              placeholder: "请选择 菜单图标",
              rules: [{ required: true, message: "请选择菜单图标", trigger: "change" }],
            },
            activeIcon: {
              label: "激活图标",
              component: "IconSelector",
              placeholder: "请选择 激活图标",
              rules: [{ required: true, message: "请选择激活图标", trigger: "change" }],
            },
            sorted: {
              label: "菜单排序",
              align: "center",
              type: "number",
              controls: false,
              value: 1,
              rules: [
                { required: true, message: "请输入菜单排序", trigger: "blur" },
                // 校验菜单排序必须为数字
                { pattern: /^[0-9]*$/, message: "菜单排序必须为数字", trigger: "blur" },
              ],
            },
            componentName: {
              label: "路由名称",
              type: "input",
              rules: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
              labelTip: "如：`user`，不填默认取路由地址并转成大驼峰，也用于 keep-alive 缓存组件标识",
            },
            redirect: {
              label: "路由定向",
              type: "input",
              labelTip: "访问该路由时自动跳转到指定地址，如果为空并且有子路由则默认为第一个子路由",
            },
            keepAlive: {
              label: "页面缓存",
              type: "radio",
              value: 0,
              dicData: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致",
            },
            alwaysShow: {
              label: "是否固定",
              type: "radio",
              value: 0,
              dicData: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择是则tagsView不可关闭，固定在tagsView栏上",
            },
            visible: {
              label: "是否显示",
              type: "radio",
              value: 1,
              dicData: [
                { label: "显示", value: 1 },
                { label: "隐藏", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择隐藏则路由将不会出现在侧边栏，但仍然可以访问",
            },
            status: {
              label: "菜单状态",
              type: "radio",
              value: 1,
              dicData: [
                { label: "开启", value: 1 },
                { label: "关闭", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择停用则路由将不会出现在侧边栏，也不能被访问",
            },
            appCode: {
              label: "应用编码",
              type: "input",
              rules: [{ required: true, message: "请输入应用编码", trigger: "blur" }],
            },
            authKey: {
              label: "权限标识",
              type: "input",
              rules: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
              labelTip: "控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)",
            },
          },
        },
      ],
    })
  );

  return { searchOption, tableOption, handleMenuTypeChange };
};
